<template>
  <el-menu
    active-text-color="#ffd04b"
    background-color="#545c64"
    text-color="#fff"
    router
    :default-active="activePath"
    @select="selectPage"
  >
    <template v-for="item in menuList" :key="item.index">
      <el-menu-item :index="item.path" :route="item.path">
        <!-- <el-icon>{{ item.icon }}</el-icon> -->
        <span>{{ item.title }}</span>
      </el-menu-item>
    </template>
  </el-menu>
</template>

<script setup>
import { ref, h, watch } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

const menuList = ref([
  { title: '首页', index: 1, path: '/home' },
  { title: '操作记录', index: 2, path: '/bill' }
])

const selectPage = (path) => {
  // router.push(path)
}

const activePath = ref('/home')
watch(
  () => route.path,
  (newPath) => {
    activePath.value = newPath
  }
)
</script>
